<template>
  <div>
    <div>count: {{ count }}</div>
    <button @click="count += 1">add</button>
    <div>
      {{ p1.name }}: {{ p1.age }}
      <button @click="changeAge1">+1</button>
    </div>
    <div>
      {{ p2.name }}: {{ p2.age }}
      <button @click="changeAge2">+1</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import useLifeCycleTest from "./useLifeCycleTest";

useLifeCycleTest("SubHello");
const count = ref(0);
const a = 111;
const b = 222;
const p1 = ref({
  name: "张三",
  age: 18,
});
let p2 = reactive({
  name: "李四",
  age: 20,
});
defineExpose({ a, b });
function changeAge1() {
  p1.value.age++;
  p1.value = { ...p1.value, age: p1.value.age };
}
function changeAge2() {
  // p2.age++;
  const response = { name: "王五", age: 21 };
  Object.assign(p2, response);
}
watch(
  // () => ({ ...p1.value }),
  p1,
  (nv, ov) => {
    console.log(`@@@ ${nv.name} ${nv.age}, ${ov.name} ${ov.age}`);
  },
  { deep: true }
);
watch(
  p2,
  (nv, ov) => {
    console.log(`@@@ ${nv.name} ${nv.age}, ${ov.name} ${ov.age}`);
  },
  {
    deep: false,
  }
);

const pageSize = ref(10);
watch(pageSize, (nv, ov) => {
  console.log(`pageSize ${ov} -> ${nv}`);
});

onMounted(() => {
  pageSize.value = 11;
  pageSize.value = 10;
});
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
